<template>
  <!-- 3  -->
  <div class="dog_div">
    <img :src="imgUrl" alt="" />

    <!-- 2.1 动态style 给标签设置背景颜色 -->
    <!-- 2.1 给文字标签绑定点击事件 当点击是随机改变背景颜色 -->
    <p :style="{ backgroundColor: colorful }" @click="changeFn">
      {{ dogName }}
    </p>
  </div>
</template>

<script>
// 2 .点击文字变色
export default {
  data() {
    //   2.0 定义一个变量
    return {
      colorful: "",
      //   dog: "",
    };
  },
  methods: {
    changeFn() {
      this.colorful = `rgb(${Math.floor(Math.random() * 255)},${Math.floor(
        Math.random() * 255
      )},${Math.floor(Math.random() * 255)})`;

      this.$emit("loveDog", this.dogName);
    },
  },
  props: ["imgUrl", "dogName"],
};
</script>

<style>
.dog_div {
  /* display: inline-block; */
  width: 400px;
  border: 1px solid #000;
  text-align: center;
  float: left;
}
img {
  width: 400px;
  height: 300px;
}
</style>